<template>
	<view class="content">

		<view class="navBar">
			<view @click="select_type(0)">
				<view style="width: 90rpx; height: 90rpx; margin: 0 auto;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/yjfk.png" mode="">
					</image>
				</view>
				<view class="typeName" :class="type_index == 0 ? 'typeYes' : ''">意见反馈</view>
			</view>
			<view @click="select_type(3)">
				<view style="width: 90rpx; height: 90rpx; margin: 0 auto;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/cjwt.png" mode="">
					</image>
				</view>
				<view class="typeName" :class="type_index == 3 ? 'typeYes' : ''">常见问题</view>
			</view>
			<!-- <view v-if="is_audit == 1" @click="select_type(1)">
				<view style="width: 90rpx; height: 90rpx; margin: 0 auto;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/wdsh.png" mode="">
					</image>
				</view>
				<view class="typeName" :class="type_index == 1 ? 'typeYes' : ''">我的审核</view>
			</view> -->
			<view @click="select_type(2)">
				<view style="width: 90rpx; height: 90rpx; margin: 0 auto;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/wdfk.png" mode="">
					</image>
				</view>
				<view class="typeName" :class="type_index == 2 ? 'typeYes' : ''">我的反馈</view>
			</view>
			<view @click="select_type(1)">
				<view style="width: 90rpx; height: 90rpx; margin: 0 auto;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/wdsh.png" mode="">
					</image>
				</view>
				<view class="typeName" :class="type_index == 1 ? 'typeYes' : ''">联系客服</view>
			</view>
		</view>

		<view v-if="type_index == 0">

			<form action="">

				<view class="tou">
					<view class="wenti">选择反馈类型</view>
					<view class="xuanxiang">
						<view v-for="(item, idx) in tags" class="item">
							<view :class="feedback_index == item.id ? 'feedbackYes' : 'feedbackNo'"
								@tap="select_feedback(item.id, item.text)">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>

				<view class="zhong">
					<view class="wenti">问题</view>
					<textarea class="shuruk yijian" v-model="txt" placeholder="请写下您的意见或建议"></textarea>

					<view class="gui-margin-top" style="width: 100%; padding-left: 20rpx;">
						<text class="gui-h4">上传图片</text>

						<view style="display: flex; flex-wrap: wrap; width: 100%;">
							<view class="" v-for="(item,index) in imgs"
								style="width: 132rpx; height: 120rpx; border-radius: 20rpx; margin: 20rpx 15rpx;"
								:key="index">
								<image style="width: 100%; height: 85rpx;" @tap="show_img(item)" :src="item" mode="">
								</image>
								<view style="text-align: center; font-size: 30rpx;" @click="dele_file_img(index)">删除
								</view>
							</view>

							<view @tap="upload_img" v-if="imgs.length < 8"
								style="width: 135rpx; height: 130rpx; background-color: #e7e7e7; text-align: center; border-radius: 15rpx; margin: 20rpx 15rpx;">
								<text class="gui-h1 gui-color-gray" style="line-height: 120rpx;">+</text>
							</view>
						</view>

					</view>

				</view>

			</form>

			<view class="gui-padding submit" v-if="count < 1">
				<button type="warn" @click="submit">提交</button>
			</view>

		</view>

		<!-- 常见问题 -->
		<view v-if="type_index == 3">

			<view class="" v-if="problem.length <= 0">
				<view style="width: 500rpx; height: 500rpx; margin: 0 auto; margin-top: 100rpx;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/zwsj.png" mode="">
					</image>
				</view>
				<view style="text-align: center;">暂无数据</view>
			</view>

			<view class="auditRecord">
				<view style="background-color: white;" v-for="(item, index) in problem">
					<view class="auditContent">
						<view class="auditDetails">
							<view>主题：{{item.title}}</view>
							<view class="censorContent">内容：{{item.content}}</view>
						</view>
						<view class="auditExamine" style="padding: 20rpx 0 0 0;" @click="common_problems(item.id)">
							<image src="@/static/activity/feedback/ck.png" alt=""></image>
							<view>查看</view>
						</view>
					</view>
				</view>
				<!-- <uni-pagination :show-icon="true" :total="18" :pageSize="8" /> -->
			</view>
		</view>

		<!-- 我的审核 -->
		<!-- <view v-if="type_index == 1">
			<view class="audit">
				<view @click="get_sh_list(0)" :class="current == 0 ? 'auditYes' : ''">未审核</view>
				<view @click="get_sh_list(1)" :class="current == 1 ? 'auditYes' : ''">已审核</view>
			</view>

			<view class="" v-if="sh_list.length <= 0">
				<view style="width: 500rpx; height: 500rpx; margin: 0 auto; margin-top: 100rpx;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/zwsj.png" mode="">
					</image>
				</view>
				<view style="text-align: center;">暂无数据</view>
			</view>

			<view class="auditRecord">
				<view style="background-color: white;" v-for="(item, index) in sh_list">
					<view class="auditContent">
						<view class="auditDetails">
							<view>主题：{{item.title}}</view>
							<view class="censorContent">内容：{{item.content}}</view>
						</view>
						<view class="auditExamine" style="padding: 20rpx 0 0 0;" @click="examine(item.id)">
							<image src="@/static/activity/feedback/ck.png" alt=""></image>
							<view>查看</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 我的反馈 -->
		<view v-if="type_index == 2">

			<view class="" v-if="list.length <= 0">
				<view style="width: 500rpx; height: 500rpx; margin: 0 auto; margin-top: 100rpx;">
					<image style="width: 100%; height: 100%;" src="@/static/activity/feedback/zwsj.png" mode="">
					</image>
				</view>
				<view style="text-align: center;">暂无数据</view>
			</view>

			<view v-else style="margin-bottom: 80rpx;">
				<!-- 卡片内容 -->
				<view class="coreContent" v-for="(item,index) in list" @click="myFeedback(item.id)">
					<view class="shenhezt">
						<view v-if="item.this_process" class="panduan">
							<img class="tubiao" src="@/static/activity/feedback/ing.png" alt="">
							<view class="underline">审核中</view>
						</view>
						<view v-if="!item.this_process" class="panduan">
							<img class="tubiao" src="@/static/activity/feedback/ok.png" alt="">
							<view class="underline">已完成</view>
						</view>
					</view>
					<view class="">主题：{{item.title}}</view>
					<view class="">姓名：{{item.user_name}}</view>
					<view class="feedback">反馈内容：{{item.content}}</view>
					<view class="auditExamine" style="margin-top: 8rpx;">
						<image src="@/static/activity/feedback/ck.png" alt=""></image>
						<view>查看</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("member"),
				apiUrl: 'https://jf.lgwisdomunion.cn',
				pages: 0,
				current: 0,
				feedback_index: 0,
				feedback_text: '程序bug',
				type_index: 0,
				tags: [{
						id: 0,
						text: "程序bug",
					},
					{
						id: 1,
						text: "功能建议",
					},
					{
						id: 2,
						text: "内容建议",
					},
					{
						id: 3,
						text: "网络问题",
					},
					{
						id: 4,
						text: "其他",
					}
				],
				txt: '',
				imgs: [],
				token: null,
				is_audit: 0,
				list: [],
				sh_list: [],
				count: 0,
				problem: [{
						id: 1,
						title: '其他',
						content: '进入页面出现“user error”问题',
					},
					{
						id: 2,
						title: '其他',
						content: '进入页面空白',
					},
					{
						id: 3,
						title: '其他',
						content: '如何查看app版本号',
					},
					{
						id: 4,
						title: '其他',
						content: '如何检查更新',
					},
					{
						id: 5,
						title: '其他',
						content: '如何清除缓存',
					},
					{
						id: 6,
						title: '其他',
						content: '首页头部导航背景与下方背景对应不上',
					}
				],
			}
		},
		onLoad(opt) {
			this.show_loading();
			if (opt.code) {
				console.log('1');
				this.loginx(opt.code);
			} else {
				this.token = uni.getStorageSync("formerToken")
				this.get_list();
			}
		},
		methods: {
			loginx(code) {
				let self = this
				self.$boya.Request({
					url: '/public/loginx',
					data: {
						code: code,
					}
				}, function(res) {
					self.show_loading()
					console.log("loginx", res);
					self.token = res.data.token
					uni.setStorageSync("formerToken", res.data.token)
					self.get_list();
				}, false)
			},
			show_loading() {
				uni.showLoading({
					title: '请稍候...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
			select_feedback(id, text) {
				this.feedback_index = id
				this.feedback_text = text
			},
			select_type(id) {
				this.type_index = id
				if (id == 1) {
					this.fabClick();
				}
			},
			// 跳转客服
			fabClick() {
				console.log('点击了悬浮按钮');
				let appid = "gh_edf4ceb10043";
				let path = "pages/service/service"
				uni.hideLoading();
				// #ifdef H5
				console.log("H5H5H5H5H5H5H5H5");
				uni.webView.postMessage({
					data: {
						type: "open_wexin",
						data: {
							app_id: appid,
							path: path
						}
					},
				})
				// #endif
				// #ifdef APP-PLUS
				console.log("APP-PLUSAPP-PLUSAPP-PLUS");
				sweixin ? sweixin.launchMiniProgram({
					id: appid,
					path: path
				}) : plus.nativeUI.alert('当前环境不支持微信操作!');
				// #endif
			},
			get_list() {
				let self = this
				console.log('token: ', self.token);
				let headers = {
					'content-type': 'application/json'
				}
				uni.request({
					url: self.apiUrl + '/api/mailbox/get_mail_list',
					data: {
						pages: self.pages,
						token: self.token
					},
					method: "POST",
					dataType: "json",
					header: headers,
					success: (res) => {
						self.hide_loading();
						console.log('yes: ', res.data.data);
						let approver = res.data.data.approver
						let list = res.data.data.list
						for (var i = 0; i < approver.length; i++) {
							if (approver[i].approvers.includes('博亚')) {
								self.is_audit = 1
							}
						}
						for (var j = 0; j < list.length; j++) {
							if (list[j].title != '提问' && list[j].title != '建议') {
								self.list.push(list[j])
							}
						}
						console.log('list: ', self.list);
					},
					fail: () => {
						console.log('no: ', res.data);
					}
				});
			},
			// get_sh_list(current) {
			// 	let self = this
			// 	self.show_loading();
			// 	self.current = current
			// 	console.log("current: ", self.current);
			// 	self.sh_list = []

			// 	this.$common.request({
			// 		url: "/mailbox/get_sh_list",
			// 		data: {
			// 			type: current,
			// 			pages: self.pages,
			// 			token: self.token
			// 		},
			// 	}, res => {
			// 		console.log('res: ', res.data.sh_list);
			// 		self.hide_loading();
			// 		if (res.code == 200) {
			// 			let sh_list = res.data.sh_list
			// 			for (let i = 0; i < sh_list.length; i++) {
			// 				// console.log('sh_list: ', sh_list[i]);
			// 				if (sh_list[i].title != '建议' && sh_list[i].title != '提问') {
			// 					self.sh_list.push(sh_list[i]);
			// 				}
			// 			}
			// 			console.log('sh_list: ', self.sh_list);
			// 		} else {
			// 			uni.showModal({
			// 				title: '提示',
			// 				content: res.data
			// 			});
			// 		}
			// 	});
			// },
			upload_img(item, index) {
				let self = this;
				if (self.imgs.length >= 8) {
					self.$boya.msg('最多只可上传8张')
					return;
				}
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						self.show_loading();
						uni.uploadFile({
							url: self.apiUrl + '/api/public/upload_aliyun_oss',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (up_res) => {
								self.hide_loading();
								let upload_res = JSON.parse(up_res.data);
								if (upload_res.code == 200) {
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									});
									self.imgs.push(upload_res.data.url);
								} else {
									uni.showModal({
										title: '提示',
										content: '上传失败'
									});
								}
								console.log(upload_res, 'up_res');
							}
						});
					}
				});
			},
			show_img(url) {
				uni.previewImage({
					urls: [url],
					index: 0
				});
			},
			dele_file_img(index) {
				this.imgs.splice(index, 1);
			},
			submit() {
				let self = this;
				self.count++
				if (!self.txt) {
					this.$boya.msg('请填写反馈内容')
					return
				} else {
					self.show_loading();
					let url = self.apiUrl + '/api/mailbox/add_mail';
					uni.request({
						url: url,
						data: {
							tp: 'feedback',
							content: self.txt,
							type: self.feedback_text,
							imgs: self.imgs,
							token: self.token
						},
						method: "POST",
						dataType: "json",
						success: (res) => {
							self.hide_loading();
							console.log('res: ', res.data);
							self.count = 0
							if (res.data.code == 200) {
								uni.showModal({
									title: '提示',
									content: '提交成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											window.location.reload(true);
										}
									}
								});
							} else {
								uni.showModal({
									title: '提示',
									content: res.data
								});
							}
						}
					});
				}
			},
			common_problems(id) {
				uni.navigateTo({
					url: '/pages/activities/feedback/commonProblem?id=' + id
				})
			},
			examine(id) {
				uni.navigateTo({
					url: '/pages/activities/feedback/myAudit?id=' + id + '&token=' + this.token
				})
			},
			myFeedback(id) {
				uni.navigateTo({
					url: '/pages/activities/feedback/myFeedback?id=' + id + '&token=' + this.token
				})
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: url("https://boyaltd.oss-cn-hangzhou.aliyuncs.com/bj_liand.png") 100% 100% / 100% 100%;
	}

	.wenti {
		font-size: 35rpx;
		margin-top: 15rpx;
		margin-left: 18rpx;
	}

	.wenti::before {
		content: "*";
		color: red;
	}

	.tou {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.xuanxiang {
		display: flex;
		flex-wrap: wrap;
		margin-top: 15rpx;
		margin-bottom: 10rpx;
	}

	.item>view {
		padding: 16rpx 40rpx;
		margin: 20rpx 25rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
	}

	.feedbackYes {
		color: white;
		background: linear-gradient(to right, #F55661, #F06C35);
	}

	.feedbackNo {
		background-color: #F5F6F9;
	}

	.zhong {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 20rpx;
		padding: 15rpx;
	}

	.yijian {
		padding-top: 15rpx;
		height: 380rpx;
	}

	.xia {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.shoujih {
		height: 90rpx;
	}

	.shuruk {
		width: 91%;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
		margin-left: 18rpx;
		padding-left: 20rpx;
		border-radius: 20rpx;
		background-color: #F5F6F9;
	}

	.tijiao {
		color: white;
		width: 80%;
		margin-top: 40rpx;
		border-radius: 50rpx;
		background: linear-gradient(to right, #F06C35, #F55661);
	}

	.navBar {
		width: 93%;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 10rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 10rpx 8rpx 10rpx rgba(198, 200, 207, 0.8);
	}

	.typeYes {
		color: #E64340;
		font-weight: bold;
	}

	.typeName {
		font-size: 28rpx;
		margin-top: -10rpx;
	}

	.submit {
		margin-top: 20rpx;
	}

	.audit {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 50rpx;
	}

	.audit>view {
		width: 150rpx;
		height: 68rpx;
		text-align: center;
		line-height: 68rpx;
		background-color: aliceblue;
		border-radius: 15rpx;
	}

	.auditYes {
		border: 3px solid white;
	}

	.auditRecord {
		width: 90%;
		margin: 0 auto;
		margin-top: 50rpx;
		color: #8a8a8a;
	}

	.auditContent {
		padding: 15rpx 30rpx;
		border: 1px solid #DBDFEA;
		margin-bottom: 60rpx;
		box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2);
	}

	.auditDetails>view {
		padding: 16rpx;
		border-bottom: 1px solid #DBDFEA;
	}

	.auditExamine {
		width: 125rpx;
		margin: 0 auto;
		display: flex;
	}

	.censorContent {
		width: 96%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.auditExamine>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.coreContent {
		width: 82%;
		height: 190rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 0 10px 6px rgba(0, 0, 0, .2);
		line-height: 50rpx;
	}

	.feedback {
		width: 99%;
		/* （文字长度超出限定宽度，则隐藏超出的内容） */
		overflow: hidden;
		/* （设置文字在一行显示，不能换行） */
		white-space: nowrap;
		/* （规定当文本溢出时，显示省略符号来代表被修剪的文本） */
		text-overflow: ellipsis;
	}

	.shenhezt {
		display: flex;
		align-items: center;
		color: #8B8B8B;
		float: right;
	}

	.panduan {
		display: flex;
		align-items: center;
	}

	.tubiao {
		width: 35rpx;
		height: 35rpx;
	}

	.underline {
		margin-left: 10rpx;
		border-bottom: 1px solid #8B8B8B;
	}
</style>